<template>
  <div class="bootstrap-color-picker-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <bootstrap-color-picker color="#00ff00" id="colorpicker1"></bootstrap-color-picker>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in colorPickerProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in colorPickerMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'BootstrapColorPickerDemo',
    data() {
      return {
//颜色拾取器组件
        colorPickerProps: [
          {name: 'color', desc: '默认值："#ff0000"。默认显示的颜色。'},
          {name: 'id', desc: '默认值："colorpicker"。颜色拾取器的id，如果只有一个拾取器，可默认不填；如果有多个拾取器同时使用，需要输入不同的id。'}
        ],
        colorPickerMethods: [
          {name: 'color-change', desc: '参数：color。颜色发生更改时触发，参数为当前选中的颜色。'}
        ],
      }
    },
    methods: {

    },
    mounted() {

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .bootstrap-color-picker-demo-wrapper{
    width:100%;
    height:100%;
  }

</style>
